.title {
  font-size: 36px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 700;
}

.circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background-color: #f3f8fb;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 100px;
  left: 50%;
  margin-left: -110px; /* 半个圆的宽度，确保水平居中 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: none; /* 禁用任何过渡效果 */
}

.circle:active {
  transform: none; /* 确保点击时不会缩放 */
}

.score {
  font-size: 44px;
  color: #333;
  text-align: center;
}

.score > view:first-child {
  font-weight: bold;
  margin-bottom: 8px;
}

.score > view:last-child {
  font-size: 48px;
  color: #1d72b8;
}

/* 表格样式 */
.table {
  margin-top: 120px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.table-header {
  display: flex;
  font-weight: 700;
  background-color: #f7f7f7;
  padding: 12px;
  font-size: 22px;
  color: #333;
  border-radius: 8px 8px 0 0; /* 圆角效果 */
}

.table-row {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #e1e1e1;
  font-size: 20px;
}

.table-cell {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  justify-content: center;
  align-items: center; /* 上下对齐 */
  padding: 8px;
  color: #666; /* 字体颜色稍微浅一些，提升可读性 */
}

.table-cell > view {
  margin-bottom: 8px; /* 两行之间的间距 */
}


/* 分类区域样式 */
.category {
  margin-top: 60px;
  width: 99%;
  margin-left: auto;
  margin-right: auto;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 26px;
  font-weight: bold;
  padding: 12px 0;
  border-bottom: 1px solid #e1e1e1;
  color: #333;
}

.category-button {
  background-color: transparent; /* 背景透明 */
  color: #999; /* 字体颜色变灰 */
  border: 1px solid #999; /* 灰色边框 */
  padding: 5px 15px; /* 按钮的内边距，适当加长 */
  font-size: 24px; /* 字体大小 */
  width: 160px; /* 调整按钮宽度，增加长度 */
  height: 50px; /* 调整按钮高度 */
  border-radius: 5px;
  cursor: pointer;
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  margin-right: 0; /* 让按钮靠右对齐 */
}

.category-button:hover {
  background-color: #f0f0f0; /* 悬停时的背景色 */
  color: #666; /* 悬停时的字体颜色 */
  border-color: #666; /* 悬停时的边框颜色 */
}

.container {
  text-align: center;
}

.ex-success {
  font-size: 40px;
  margin-top: 300px;
}



